<template>
    <div>
        <el-dialog :title="addInfo.isAdd ? '添加管理员' : '编辑管理员'" :visible.sync="addInfo.isShow" center :before-close="cancel">
            <el-form :model="adminFrom" :rules="rules" ref="adminRef">
                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="adminFrom.roleid" placeholder="请选择">
                        <el-option v-for="item in rolelist" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                    <el-input autocomplete="off" v-model="adminFrom.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="adminFrom.password"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="adminFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { adminAdd, adminInfo, adminEdit } from '../../request/api'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['addInfo'],
    data() {
        return {
            formLabelWidth: '120px',
            adminFrom: {
                roleid: '',
                username: '',
                password: '',
                status: 1
            },
            // 规则验证
            rules: {
                roleid: [
                    { required: true, message: '请输入所属角色', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapActions({
            getRole: 'role/getRoleListAction',
            getAdmin:'admin/getAdminListAction',
            getCount:'admin/getAdminCount'
        }),
        // 数据回显
        async lookUp(uid) {
            let res = await adminInfo({ uid })
            this.adminFrom = res.list
            // 如果密码为空 不做修改
            this.adminFrom.password=''
            this.adminFrom.uid=uid

        },
        cancel() {
            this.$emit('cancel', false)
            // 清空
            this.reset()
        },
        // 重置事件
        reset(){
           this.adminFrom={
                roleid: '',
                username: '',
                password: '',
                status: 1
            },
            // 清空表单验证
            this.$refs.adminRef.resetFields()
        },
        // 确定添加事件
        confirm() {
            this.$refs.adminRef.validate((val) => {
                if (val) {
                    if (this.addInfo.isAdd) {
                        adminAdd(this.adminFrom).then(res => {
                            // console.log(res)
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                // 添加完成关闭弹窗
                                this.cancel()
                                // 获取列表
                                this.getAdmin()
                                // 获取总条数
                                this.getCount()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        // 编辑事件
                        adminEdit(this.adminFrom).then(res => {
                            // console.log(res)
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                // 添加完成关闭弹窗
                                this.cancel()
                                // 获取列表
                                this.$store.dispatch('admin/getAdminListAction')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    },
    mounted() {
        // 组件一加载 就调用角色行动
        if (this.rolelist.length == 0) {
            this.getRole()
        }
    },
    watch: {},
    computed: {
        ...mapGetters({
            rolelist: 'role/getRole'
        })

    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>